@extends('admin.common.main')

@section('cnt')
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span> 用户中心
    <span class="c-gray en">&gt;</span> 权限列表
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

{{-- 消息提示 --}}
@include('admin.common.msg')

<div class="page-container">
    <form method="get" class="text-c">
        <input type="text" class="input-text" style="width:250px" placeholder="角色" id="" name="name" autocomplete="off">
        <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜角色</button>
    </form>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a class="btn btn-danger radius" onclick="deleteAll();">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>
            <a href="{{ route('admin.role.create') }}" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i> 添加角色
            </a>
        </span>
    </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="80">ID</th>
                <th width="100">角色名称</th>
                <th width="100">查看权限</th>
                <th width="130">加入时间</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            @foreach($data as $item)
            <tr class="text-c">
                <td>{{ $item->id }}</td>
                <td>{{ $item->name }}</td>
                <td>
                    <a class="label label-success" href="#" >权限</a>
                </td>
                <td>{{ $item->created_at }}</td>
                <td class="td-manage">
                    <a href="{{ route('admin.role.edit',$item) }}" class="label label-secondary radius">修改</a>
                    <a href="{{ route('admin.role.destroy',$item) }}" class="label label-warning radius">删除</a>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        {{-- 分页 --}}
        {{ $data->links() }}
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
    const _token = "{{ csrf_token() }}";
    //给删除按钮绑定事件
    $('.delbtn').click(function(evt){
        //获取请求的Url地址
        let url = $(this).attr('href');
        $.ajax({
            url,
            data: {
                _token : _token
            },
            type: 'DELETE',
            dataType: 'json'
        }).then(ret=>{
            console.log(ret)
            if(ret.status == 1){
                //$(this).parents('tr').remove();
                layer.msg(ret.msg,{
                    icon: 1,
                    time: 1500
                },()=>{
                    location.reload();
                });
            }else{
                layer.msg(ret.msg,{
                    icon: 2,
                    time: 1500
                });
            }
        });

        //jquery取消默认事件
        return false;
    });

    //全选删除
    function deleteAll(){

        layer.confirm('确认要删除选中的用户吗?',{
            btn:['确认删除','在考虑下']
        },()=>{
            let ids = $('input[name="id[]"]:checked');
            let idArr = [];
            $.each(ids,(key,val) => {
                //dom对象转为jquery对象 $(dom对象)
                idArr.push($(val).val())
            });

            if(idArr.length > 0){
                //发起ajax
                $.ajax({
                    url: "{{ route('admin.user.delall') }}",
                    data: {
                        id: idArr,
                        _token: _token
                    },
                    type: 'DELETE',
                    dataType: 'json'
                }).then(ret =>{
                    if(ret.status == 1){
                        layer.msg(ret.msg,{
                            icon: 1,
                            time: 1500
                        },()=>{
                            location.reload();
                        });
                    }else{
                        layer.msg(ret.msg,{
                            icon: 2,
                            time: 1500
                        });
                    }
                });
            }
        })
    }
</script>
@endsection
